<template>
	<view class="copyUrl">
		<icon-label :text="$t('property.url.title')" icon="icon-description"></icon-label>
		<view class="row between copyPics">
			<input class="form-input" v-model="url" />
			<button :style="{ 'background': code==1 ? '#497ff7' : '#dddddd' }" @click.stop="getPics">{{$t('property.url.btn')}}</button>
		</view>
		 <!-- @afterRead="afterRead" -->
		<u-upload :fileList="images" name="0" style="margin-top: 40rpx;" :disabled="true" @delete="deletePic" multiple :maxCount="9"></u-upload>
		<u-button class="gap-col-top2" type="primary" shape="circle" @click="handleSubmit">
			{{ $t('submit.copyButton') }}
		</u-button>
	</view>
</template>

<script>
	import {picsFromUrl} from "../../lib/service"
	export default{
		data(){
			return{
				url:"",
				images:[],
				code:1,
			}
		},
		methods:{
			getPics(){
				if(!this.url) {
					uni.$u.toast('The URL address cannot be empty')
					return
				};
				this.code = 0;
			    picsFromUrl({url:this.url}).then((res) => {
			    		if(res.statusCode==0){
							this.images = res.data.list;
							this.url = '';
							this.code = 1;
						}else{
							this.code = 1;
							uni.$u.toast('Upload failed')
						}
			    	}).catch((err) => {
						this.code = 1;
			    	});
			},
			deletePic(event) {
				this.images.splice(event.index, 1);
			},
			handleSubmit(){
				uni.$emit('isRefresh', {
					images: this.images,
				});
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.copyUrl {
		padding: 20rpx 40rpx;
		.copyPics{
			input{
				width: 70%;
			}
			button{
				max-width: 150rpx;
				background: #497ff7;
				color: #ffffff;
				font-size: 28rpx;
				margin: 0;
				padding: 0 20rpx;
			}
		}
		.gap-col-top2{
			width: 90%;
			position: fixed;
			bottom: 30rpx;
		}
		}
</style>